React Hooks使用案例学习

Posted on | In

清除 effect

通常，组件卸载时需要清除 effect 创建的诸如订阅或计时器 ID 等资源。要实现这一点，useEffect 函数需返回一个清除函数。也就是说，要想在组件销毁的时候搞一些事情，需要useEffect 末尾返回一个函数，在这个函数里面可以写具体销毁的内容。

看下面的例子，在当前页面里面，页面的标题是’测试title’，当切换到其他页面时，页面的标题变成‘正式title’。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import React, { useEffect } from 'react';

function useDocumentTitle(title) {
useEffect(() => {
    document.title = title;
    return () => {
    console.log('销毁1————————————————');
    document.title = '正式title';
    };
}, [title]);
}

export default function CheckboxDemo() {
useDocumentTitle('测试title');

return <div />;
}

监听页面大小变化，网络是否断开

效果：在组件调用 useWindowSize 时，可以拿到页面大小，并且在浏览器缩放时自动触发组件更新。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

import React, { useEffect, useState } from 'react';

function getSize() {
return {
    innerHeight: window.innerHeight,
    innerWidth: window.innerWidth,
    outerHeight: window.outerHeight,
    outerWidth: window.outerWidth,
};
}

function useWindowSize() {
const [windowSize, setWindowSize] = useState(getSize());

function handleResize() {
    setWindowSize(getSize());
}

useEffect(() => {
    window.addEventListener('resize', handleResize);

    return () => {
    window.removeEventListener('resize', handleResize);
    };
}, []);
return windowSize;
}

export default function Demo() {
const windowSize = useWindowSize();
return <div>页面宽度{windowSize.innerWidth}</div>;
}

动态注入 css

效果：在页面注入一段 class，并且当组件销毁时，移除这个 class。

1
2
3
4
5
6

const className = useCss({
color: "red"
});

return <div className={className}>Text.</div>;

实现：可以看到，Hooks 方便的地方是在组件销毁时移除副作用，所以我们可以安心的利用 Hooks 做一些副作用。注入 css 自然不必说了，而销毁 css 只要找到注入的那段引用进行销毁即可。